<?php
// -----------------------------------------------------------------------------
// include
// -----------------------------------------------------------------------------

include "../config/config.php";
include "../auth.php";

// -----------------------------------------------------------------------------
?>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>搜索</title>
    <link rel="stylesheet" href="../resources/bootstrap-5.2.0-beta1-dist/css/bootstrap.min.css">
    <base target="_self">
</head>
<body>

<!-- ----------------------------------------------------------------------- -->

<script src="../resources/bootstrap-5.2.0-beta1-dist/js/bootstrap.min.js"></script>
<script src="../resources/jQuery/jquery-3.5.1.js"></script>
<?php include "../globalNavbar.php"; ?>

<!-- ----------------------------------------------------------------------- -->

<!-- div container start -->
<div class="container container-fluid mt-3 mb-5">

    <!-- 导航栏 开始 -->
    <div class="mt-3">
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a class="text-decoration-none" href="<?php echo $homepage; ?>">首页</a>
                </li>
                <li class="breadcrumb-item active">搜索</li>
            </ol>
        </nav>
    </div>
    <!-- 导航栏 结束 -->

    <form id="myForm" method="post" action="searchFormAction.php" class="mt-3">

        <fieldset>
            <input class="form-control"
                   id="inputKeyword"
                   name="keyword"
                   placeholder="请输入关键词"
                   autocomplete="off"
                   required
                   autofocus
                   type="text">
        </fieldset>

        <fieldset class="mt-3">
            <button class="btn btn-outline-primary"
                    type="submit"
                    id="btnSubmit">搜索</button>
            <button class="btn btn-outline-secondary" type="button" id="btnClear">清空</button>
        </fieldset>

    </form>

</div>
<!-- div container end -->

<!-- ----------------------------------------------------------------------- -->

<!--事件处理-->
<script>

    // 提交表单前，检测输入是否为空
    $("#myForm").on("submit", function (e) {
        e.preventDefault()
        let keyword = $("#inputKeyword").val()
        if (keyword.trim().length === 0) {
            alert("输入不应为空！")
            $("#inputKeyword").val("")
            $("#inputKeyword").focus()
        } else {
            this.submit()
        }
    })

    // 点击清空按钮后执行
    $("#btnClear").on("click", function () {
        $("#inputKeyword").val("")
        $("#inputKeyword").focus()
    })
</script>

<!-- ----------------------------------------------------------------------- -->
</body>
</html>
